<template>
  <Header :title="{ zh: '针车二课目视管理看板', en: 'Stitching Line-2 Visual Board', index: 31 }" />

  <div class="EchartsContainer">
    <div class="row">
      <div class="item">
        <div class="title">月生产状况</div>
        <div class="echarts" id="main"></div>
      </div>
      <!--      <div class="item">-->
      <!--        <div class="title">月生产达成率</div>-->
      <!--        <div class="echarts" id="main2"></div>-->
      <!--      </div>-->
      <div class="item" style="margin-left: 10px">
        <div class="title" style="text-align: start">日生产状况</div>
        <el-table
          ref="tab"
          border
          class="table"
          :data="tableData"
          style="width: 100%; height: 100%"
        >
          <el-table-column align="center" prop="deptName" label="组别" />
          <el-table-column align="center" prop="inQty" label="产量" />
          <el-table-column align="center" prop="deptPpl" label="人数" />
          <el-table-column align="center" prop="pplProc" label="人均产能" />
        </el-table>
      </div>
    </div>
    <swiper
      :autoplay="{
        delay: 60000
      }"
      :slides-per-view="1"
      :space-between="2000"
      style="height: 50%"
    >
      <swiper-slide>
        <div class="row" style="margin-top: 10px; width: 100%; height: 100%">
          <div class="item">
            <div class="title">针七组人均产能<span style="color: red">(双/人/天)</span></div>
            <div class="echarts" id="main4"></div>
          </div>
          <div class="item">
            <div class="title">针八组人均产能<span style="color: red">(双/人/天)</span></div>
            <div class="echarts" id="main5"></div>
          </div>
          <div class="item">
            <div class="title">针九组人均产能<span style="color: red">(双/人/天)</span></div>
            <div class="echarts" id="main6"></div>
          </div>
        </div>
      </swiper-slide>
      <swiper-slide>
        <div class="row" style="margin-top: 10px; width: 100%; height: 100%">
          <div class="item">
            <div class="title">针十组人均产能<span style="color: red">(双/人/天)</span></div>
            <div class="echarts" id="main7"></div>
          </div>
          <div class="item">
            <div class="title">组十一均产能<span style="color: red">(双/人/天)</span></div>
            <div class="echarts" id="main8"></div>
          </div>
          <div class="item">
            <div class="title">针十二组人均产能<span style="color: red">(双/人/天)</span></div>
            <div class="echarts" id="main9"></div>
          </div>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script setup lang="ts">
import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
import Header from '../../components/Header.vue'
import * as echarts from 'echarts'
import request from '@/utils/request'
import { ElMessage } from 'element-plus'
import { Swiper, SwiperSlide } from 'swiper/vue'

let rollTimer = ref() as any

const tab = ref<HTMLElement>() as any
const autoRoll = (stop: any) => {
  if (stop) {
    clearInterval(rollTimer.value)
    return
  }
  // 这里的 tab 是上方 table 表格绑定的ref值
  const divData = tab.value.layout.table.refs.bodyWrapper.firstElementChild.firstElementChild
  rollTimer.value = setInterval(() => {
    divData.scrollTop += 1
    // console.log(divData.scrollTop)
    if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {
      divData.scrollTop = 0
    }
  }, 150)
}
onMounted(() => {
  autoRoll(false)
})
onBeforeUnmount(() => {
  autoRoll(true)
})

const tableData1 = ref({
  ordQty: [], // 目标产量
  inQty: [], // 实际产量
  deptName: [] //部门名称
}) as any
// 人均产能接口返回数据
// 第四-10张图
let aoppData = ref([]) as any
const getDeptTypes = async () => {
  // 人均产能
  let deptTypes = [] as any
  for (const item of tableDataList2) {
    try {
      deptTypes.push(
        await request.post<any, any>(
          `/show/finishStore/getPersonProduction?deptId=${2}&deptNo=${item.deptNo}`,
          {
            endDate: '',
            pushUnit: '1',
            titleUnit: '本周'
          }
        )
      ) as any
    } catch (error: any) {
      ElMessage.error(error)
    }
  }
  //console.log(deptTypes)
  deptTypes.forEach((item: any, index: any) => {
    if (!Array.isArray(aoppData.value[index])) {
      aoppData.value[index] = {
        xData: [],
        list: []
      }
    }
    item.forEach((item: any) => {
      aoppData.value[index].xData.push(item.slipDate)
      aoppData.value[index].list.push(item.capacity)
    })
  })
}
const getData = async () => {
  // 获取日生产状况
  try {
    let tableDataList1 = (await request.post<any, any>(
      `/show/finishStore/getDailyProduction?deptId=${2}`,
      {
        endDate: '',
        pushUnit: '1',
        titleUnit: '日'
      }
    )) as any
    // console.log(tableDataList1)
    tableData.value = tableDataList1.map((item: any) => {
      return {
        deptName: item.deptName,
        inQty: item.qty,
        deptPpl: item.persons,
        pplProc: item.capacity
      }
    })
  } catch (error: any) {
    ElMessage.error(error)
  }
}
let tableDataList2 = [] as any
const MgetData = async () => {
  // 获取月生产状况
  try {
    tableDataList2 = (await request.post<any, any>(
      `/show/finishStore/getMonthProduction?deptId=${2}`,
      {
        endDate: '',
        pushUnit: '1',
        titleUnit: '月'
      }
    )) as any
    // console.log(tableDataList2)
    tableDataList2.forEach((item: any) => {
      tableData1.value.inQty.push(item.actualProQty)
    })
  } catch (error: any) {
    ElMessage.error(error)
  }
}
onMounted(async () => {
  await getData()
  await MgetData()
  await getDeptTypes()
  getEchartsDom()
})

const tableData = ref([])
const getEchartsDom = () => {
  let chartDom = document.getElementById('main')
  let myChart = echarts.init(chartDom)
  let option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    legend: {
      data: ['产量'],
      top: 'bottom'
    },
    grid: {
      left: 60,
      right: 10,
      top: 30,
      bottom: 45
    },
    xAxis: [
      {
        type: 'category',
        data: ['针七', '针八', '针九', '针十', '针十一', '针十二'],
        // data: tableData1.value.deptName,
        axisPointer: {
          type: 'shadow'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        min: 0,
        // max: 35000,
        // interval: 5000,
        axisLabel: {
          formatter: '{value}'
        }
      }
    ],
    series: [
      //   {
      //     name: '目标产量',
      //     type: 'bar',
      //     barWidth: 10,
      //     label: {
      //       show: true,
      //       position: 'top'
      //     },
      //     tooltip: {
      //       valueFormatter: function (value: any) {
      //         return value
      //       }
      //     },
      //     itemStyle: {
      //       // 设置柱状图颜色
      //       color: '#88ADFB'
      //     },
      //     data: [8000, 8000, 10000, 8000, 8000, 9000,]
      //     // data: tableData1.value.ordQty
      //   },
      {
        name: '产量',
        type: 'bar',
        barWidth: 50,
        label: {
          show: true,
          position: 'top'
        },
        itemStyle: {
          // 设置柱状图颜色
          color: '#72DDB3'
        },
        tooltip: {
          valueFormatter: function (value: any) {
            return value
          }
        },
        // data: [2300, 2900, 3000, 4500, 3900, 3400,]
        data: tableData1.value.inQty
      }
    ]
  }
  option && myChart.setOption(option)

  // // 第二张图
  // let chartDom2 = document.getElementById('main2')
  // let myChart2 = echarts.init(chartDom2)
  // // There should not be negative values in rawData
  // const rawData = [tableData1.value.inQty, tableData1.value.ordQty]
  // const totalData = [] as any
  // for (let i = 0; i < rawData[0].length; ++i) {
  //   let sum = 0
  //   for (let j = 0; j < rawData.length; ++j) {
  //     sum += rawData[j][i]
  //   }
  //   totalData.push(sum)
  // }
  // const series = ['实际产量', '目标产量'].map((name, sid) => {
  //   return {
  //     name,
  //     type: 'bar',
  //     stack: 'total',
  //     barWidth: '50%',
  //     data: rawData[sid].map((d: any, did: any) => (totalData[did] <= 0 ? 0 : d / totalData[did]))
  //   }
  // })
  // let option2 = {
  //   color: ['#FAC858', '#93BEFF'],
  //   legend: {
  //     data: ['目标产量', '实际产量'],
  //     top: 'bottom',
  //     selectedMode: false
  //   },
  //   grid: {
  //     left: 40,
  //     right: 20,
  //     top: 30,
  //     bottom: 45
  //   },
  //   yAxis: {
  //     type: 'value'
  //   },
  //   xAxis: {
  //     type: 'category',
  //     // data: DeptName.value
  //     data: ['针一', '针二', '针三', '针四', '针五', '针六'],
  //   },
  //   series: [
  //     {
  //       name: '目标产量',
  //       type: 'bar',
  //       stack: 'total',
  //       barWidth: '50%',
  //       data: [0.25, 0.31, 0.3, 0.5, 0.44, 0.33, 0.35]
  //     }, {
  //       name: '实际产量',
  //       type: 'bar',
  //       stack: 'total',
  //       barWidth: '50%',
  //       data: [0.75, 0.69, 0.7, 0.5, 0.56, 0.67, 0.65]
  //     }
  //   ]
  // }
  // option2 && myChart2.setOption(option2)

  // 第四张图
  let chartDom4 = document.getElementById('main4')
  let myChart4 = echarts.init(chartDom4)
  let option4 = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },

    grid: {
      left: 40,
      right: 0,
      top: 30,
      bottom: 30
    },
    xAxis: [
      {
        type: 'category',
        // data: ['9/4', '9/3', '9/2'],
        data: aoppData.value[0].xData,
        axisPointer: {
          type: 'shadow'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        min: 0,
        // max: 100,
        // interval: 20,
        axisLabel: {
          formatter: '{value}'
        }
      }
    ],
    series: [
      {
        // name: '成一线',
        type: 'bar',
        barWidth: '40%',
        label: {
          show: true,
          position: 'top'
        },
        tooltip: {
          valueFormatter: function (value: any) {
            return value
          }
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1, // 渐变方向：从上到下
            [
              { offset: 0, color: '#88ADFB' },
              { offset: 1, color: '#E3ECFF' }
            ]
          )
        },
        data: aoppData.value[0].list
        // data: [30, 50, 40]
      }
    ]
  }
  option4 && myChart4.setOption(option4)

  // 第五张图
  let chartDom5 = document.getElementById('main5')
  let myChart5 = echarts.init(chartDom5)
  let option5 = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },

    grid: {
      left: 40,
      right: 0,
      top: 30,
      bottom: 30
    },
    xAxis: [
      {
        type: 'category',
        // data: ['9/4', '9/3', '9/2'],
        data: aoppData.value[1].xData,
        axisPointer: {
          type: 'shadow'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        min: 0,
        // max: 100,
        // interval: 20,
        axisLabel: {
          formatter: '{value}'
        }
      }
    ],
    series: [
      {
        name: '成一线',
        type: 'bar',
        barWidth: '40%',
        label: {
          show: true,
          position: 'top'
        },
        tooltip: {
          valueFormatter: function (value: any) {
            return value
          }
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1, // 渐变方向：从上到下
            [
              { offset: 0, color: '#88ADFB' },
              { offset: 1, color: '#E3ECFF' }
            ]
          )
        },
        // data: [26, 35, 30]
        data: aoppData.value[1].list
      }
    ]
  }
  option5 && myChart5.setOption(option5)

  // 第六张图
  let chartDom6 = document.getElementById('main6')
  let myChart6 = echarts.init(chartDom6)
  let option6 = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },

    grid: {
      left: 40,
      right: 0,
      top: 30,
      bottom: 30
    },
    xAxis: [
      {
        type: 'category',
        data: aoppData.value[2].xData,
        // data: ['9/4', '9/3', '9/2'],
        axisPointer: {
          type: 'shadow'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        min: 0,
        // max: 100,
        // interval: 20,
        axisLabel: {
          formatter: '{value}'
        }
      }
    ],
    series: [
      {
        name: '成一线',
        type: 'bar',
        barWidth: '40%',
        label: {
          show: true,
          position: 'top'
        },
        tooltip: {
          valueFormatter: function (value: any) {
            return value
          }
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1, // 渐变方向：从上到下
            [
              { offset: 0, color: '#88ADFB' },
              { offset: 1, color: '#E3ECFF' }
            ]
          )
        },
        // data: [30, 50, 40]
        data: aoppData.value[2].list
      }
    ]
  }
  option6 && myChart6.setOption(option6)

  // 第七张图
  let chartDom7 = document.getElementById('main7')
  let myChart7 = echarts.init(chartDom7)
  let option7 = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },

    grid: {
      left: 40,
      right: 0,
      top: 30,
      bottom: 30
    },
    xAxis: [
      {
        type: 'category',
        data: aoppData.value[3].xData,
        // data: ['9/4', '9/3', '9/2'],
        axisPointer: {
          type: 'shadow'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        min: 0,
        // max: 100,
        // interval: 20,
        axisLabel: {
          formatter: '{value}'
        }
      }
    ],
    series: [
      {
        name: '成一线',
        type: 'bar',
        barWidth: '40%',
        label: {
          show: true,
          position: 'top'
        },
        tooltip: {
          valueFormatter: function (value: any) {
            return value
          }
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1, // 渐变方向：从上到下
            [
              { offset: 0, color: '#88ADFB' },
              { offset: 1, color: '#E3ECFF' }
            ]
          )
        },
        // data: [30, 50, 40]
        data: aoppData.value[3].list
      }
    ]
  }
  option7 && myChart7.setOption(option7)

  // 第八张图
  let chartDom8 = document.getElementById('main8')
  let myChart8 = echarts.init(chartDom8)
  let option8 = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },

    grid: {
      left: 40,
      right: 0,
      top: 30,
      bottom: 30
    },
    xAxis: [
      {
        type: 'category',
        data: aoppData.value[4].xData,
        // data: ['9/4', '9/3', '9/2'],
        axisPointer: {
          type: 'shadow'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        min: 0,
        // max: 100,
        // interval: 20,
        axisLabel: {
          formatter: '{value}'
        }
      }
    ],
    series: [
      {
        name: '成一线',
        type: 'bar',
        barWidth: '40%',
        label: {
          show: true,
          position: 'top'
        },
        tooltip: {
          valueFormatter: function (value: any) {
            return value
          }
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1, // 渐变方向：从上到下
            [
              { offset: 0, color: '#88ADFB' },
              { offset: 1, color: '#E3ECFF' }
            ]
          )
        },
        // data: [30, 50, 40]
        data: aoppData.value[4].list
      }
    ]
  }
  option8 && myChart8.setOption(option8)

  // 第九张图
  let chartDom9 = document.getElementById('main9')
  let myChart9 = echarts.init(chartDom9)
  let option9 = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },

    grid: {
      left: 40,
      right: 0,
      top: 30,
      bottom: 30
    },
    xAxis: [
      {
        type: 'category',
        data: aoppData.value[5].xData,
        // data: ['9/4', '9/3', '9/2'],
        axisPointer: {
          type: 'shadow'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        min: 0,
        // max: 100,
        // interval: 20,
        axisLabel: {
          formatter: '{value}'
        }
      }
    ],
    series: [
      {
        name: '成一线',
        type: 'bar',
        barWidth: '40%',
        label: {
          show: true,
          position: 'top'
        },
        tooltip: {
          valueFormatter: function (value: any) {
            return value
          }
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1, // 渐变方向：从上到下
            [
              { offset: 0, color: '#88ADFB' },
              { offset: 1, color: '#E3ECFF' }
            ]
          )
        },
        // data: [30, 50, 40]
        data: aoppData.value[5].list
      }
    ]
  }
  option9 && myChart9.setOption(option9)
}

onMounted(() => {
  function One() {
    if (location.href.indexOf('#reloaded') == -1) {
      location.href = location.href + '#reloaded'
      location.reload()
    }
  }
  One()
})
</script>

<style scoped lang="less">
:deep(.el-carousel__container) {
  height: 100%;
}

.EchartsContainer {
  border-radius: 4px;
  margin-top: 10px;
  width: 100%;
  height: calc(100vh - 7vh - 40px);
}

.row {
  display: flex;
  height: 50%;
  width: 100%;

  .item {
    background-color: white;
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-bottom: 10px;
    padding: 0 10px 5px;

    // align-items: center;
    .title {
      font-weight: 900;
      font-size: 1rem;
      margin-top: 10px;
      text-align: center;
      color: black;
    }

    .echarts {
      flex: 1;
    }
  }
}

.table {
  margin-top: 5px;
}

:deep(thead) {
  .is-center {
    color: white;
    background-color: #ff9940;
  }
}
</style>
